<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<title>nice</title>


</head>
<body>

<div class="view">
<ul class="animate-box">
<li class="surface-1">1</li>
<li class="surface-2">2</li>
<li class="surface-3">3</li>
<li class="surface-4">4</li>
<li class="surface-5">5</li>
<li class="surface-6">6</li>
</ul >
<ul class="change">
<li class="surface-7 surface-1">1</li>
<li class="surface-8 surface-2">2</li>
<li class="surface-9 surface-3">3</li>
<li class="surface-10 surface-4">4</li>
<li class="surface-11 surface-5">5</li>
<li class="surface-12 surface-6">6</li>
</ul>
</div>
<style>
body{
background-color:#f0f0f0;

}
.view{
position:absolute;
width:300px;
height:300px;
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%);
animation:start 5s linear infinite;
}
.view ul{
margin:0;
padding:0;
width:100%;
height:100%;
position:relative;
transform-style:preserve-3d;
transform:rotateX(15deg) rotateY(45deg);
animation:move 5s linear infinite;

}
.view ul li{
 position:absolute;
 list-style:none;
 width:100%;
 height:100%;
 top:0;
 left:0;
 font-size:100px;
 text-align:center;
 line-height:300px;
 opacity:.3;
 background-color:#00a0fd;
 border-left:1px solid black;
 border-top:1px solid black;
transition:all 1s;
}
.view .change{

position:absolute;
top:0;
left:0;

}

.view .change li{
    
    transition:all 1s;
   -webkit-transition:all 1s;
}
.view:hover .change li{
   
    width:400px;
    height:400px;
    position:absolute;
    top:0;
    left:0;
   
}
.view:hover .change .surface-7{ transform:rotateX(0deg) rotateY(0deg) translateZ(-350px);}
.view:hover .change .surface-8{ transform:rotateX(0deg) rotateY(-90deg) translateZ(-350px);}
.view:hover .change .surface-9{ transform:rotateX(0deg) rotateY(180deg) translateZ(-350px);}
.view:hover .change .surface-10{ transform:rotateX(0deg) rotateY(90deg) translateZ(-350px);}
.view:hover .change .surface-11{ transform:rotateX(90deg) rotateY(0deg) translateZ(-350px);}
.view:hover .change .surface-12{ transform:rotateX(-90deg) rotateY(0deg) translateZ(-350px);}
.view ul .surface-1{
 transform:rotateX(0deg) rotateY(0deg) translateZ(-150px);
 
}
.view ul .surface-2{
 transform:rotateX(0deg) rotateY(90deg) translateZ(-150px);

}
.view ul .surface-3{
 transform:rotateX(0deg) rotateY(180deg) translateZ(-150px);
 
}
.view ul .surface-4{
 transform:rotateX(0deg) rotateY(-90deg) translateZ(-150px);

}
.view ul .surface-5{
 transform:rotateX(90deg) rotateY(0deg) translateZ(-150px);

}
.view ul .surface-6{
 transform:rotateX(-90deg) rotateY(0deg) translateZ(-150px);
 
}

@keyframes move{
0%{transform:rotateX(15deg) rotateY(0deg);}



100%{transform:rotateX(15deg) rotateY(-360deg);}
}



</style>
</body>

















</html>